import { defineStore } from 'pinia';

// 定义主题store
export const useThemeStore = defineStore('theme', {
  state: () => ({
    // 当前主题模式: 'light' | 'dark'
    mode: 'light',
    // 主题颜色配置
    colors: {
      primary: '#6B46C1',
      secondary: '#ED8936',
      success: '#38A169',
      warning: '#DD6B20',
      error: '#E53E3E',
      info: '#3182CE'
    },
    // 是否跟随系统主题
    followSystem: false
  }),

  getters: {
    /**
     * 获取当前主题的CSS变量对象
     * @returns {Object} 包含主题CSS变量的对象
     */
    themeVariables() {
      return {
        '--primary-color': this.colors.primary,
        '--secondary-color': this.colors.secondary,
        '--success-color': this.colors.success,
        '--warning-color': this.colors.warning,
        '--error-color': this.colors.error,
        '--info-color': this.colors.info,
        // 根据模式设置背景色和文本色
        '--bg-color': this.mode === 'dark' ? '#1A202C' : '#FFFFFF',
        '--text-color': this.mode === 'dark' ? '#FFFFFF' : '#2D3748',
        '--bg-color-secondary': this.mode === 'dark' ? '#2D3748' : '#F7FAFC',
        '--text-color-secondary': this.mode === 'dark' ? '#E2E8F0' : '#718096'
      };
    }
  },

  actions: {
    /**
     * 切换主题模式
     * @param {string} mode - 主题模式: 'light' | 'dark'
     */
    setMode(mode) {
      if (mode !== 'light' && mode !== 'dark') {
        console.error('Invalid theme mode:', mode);
        return;
      }
      this.mode = mode;
      this.applyTheme();
      // 保存到本地存储
      uni.setStorageSync('theme-mode', mode);
    },

    /**
     * 设置主题颜色
     * @param {Object} colors - 颜色配置对象
     */
    setColors(colors) {
      this.colors = { ...this.colors, ...colors };
      this.applyTheme();
      // 保存到本地存储
      uni.setStorageSync('theme-colors', JSON.stringify(this.colors));
    },

    /**
     * 切换是否跟随系统主题
     * @param {boolean} follow - 是否跟随系统
     */
    setFollowSystem(follow) {
      this.followSystem = follow;
      if (follow) {
        this.detectSystemTheme();
      }
      // 保存到本地存储
      uni.setStorageSync('theme-follow-system', follow);
    },

    /**
     * 应用主题到文档
     */
    applyTheme() {
      const variables = this.themeVariables;
      
      // #ifdef H5
      const root = document.documentElement;

      // 设置CSS变量
      Object.entries(variables).forEach(([key, value]) => {
        root.style.setProperty(key, value);
      });

      // 设置HTML类名
      if (this.mode === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
      // #endif
      
      // #ifndef H5
      // 在非H5平台，可以通过其他方式应用主题，例如通过全局样式或组件属性
      // 这里可以添加针对小程序或App的特殊处理
      // #endif
    },

    /**
     * 检测系统主题
     */
    detectSystemTheme() {
      // #ifdef H5
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        this.setMode('dark');
      } else {
        this.setMode('light');
      }
      // #endif
      
      // #ifndef H5
      // 在非H5平台，系统主题检测可能需要使用其他方法
      // 例如，可以通过uni.getSystemInfoSync()获取系统信息
      // 这里可以添加针对小程序或App的特殊处理
      // #endif
    },

    /**
     * 从本地存储加载主题配置
     */
    loadFromStorage() {
      try {
        const mode = uni.getStorageSync('theme-mode');
        if (mode) {
          this.mode = mode;
        }

        const colors = uni.getStorageSync('theme-colors');
        if (colors) {
          this.colors = JSON.parse(colors);
        }

        const followSystem = uni.getStorageSync('theme-follow-system');
        if (followSystem !== null) {
          this.followSystem = followSystem === 'true';
        }

        this.applyTheme();
      } catch (error) {
        console.error('Failed to load theme from storage:', error);
      }
    }
  }
});